<template>
    <div class="blank-content-box">
        <div class="attr-item">
            <div class="attr-item-label">高度</div>
            <div class="block">
                <el-slider
                    v-model="content.height"
                    :show-input-controls="false"
                    input-size="mini"
                    show-input>
                </el-slider>
            </div>
        </div>
        <div class="attr-item">
            <ColorPicker :options="content"/>
        </div>
    </div>
</template>

<script>
    import ColorPicker from '../common/contentstyle/ColorPicker.vue';

    export default {
        name: 'BlankContent',
        props: {
            content: {
                type: Object,
                default: _ => {
                    return {
                        height: 10,
                        color: 'rgba(255,255,255,1)'
                    };
                }
            }
        },
        components: {
            ColorPicker
        }
    }
</script>

<style scoped lang="scss">
    .blank-content-box {
        .attr-item {
            width: 100%;
            height: 38px;
            display: flex;
            overflow: hidden;
            margin-top: 10px;

            .attr-item-label {
                padding-right: 15px;
                line-height: 38px;
            }
            .block {
                width: calc(100% - 43px);
            }
        }
    }
</style>
<style lang="scss">
    .blank-content-box {
        .attr-item {
            .el-slider__input.el-input-number--mini {
                width: 52px;
            }
            .el-slider__runway {
                width: 166px;
            }
        }
    }
</style>
